<template>
  <div class="aside">
    <!-- tab栏切换 -->
    <div class="aside-tab">
      <div
        v-for="(item, index) in cityList"
        :key="index"
        @mouseenter="handleStrategy(index)"
        @mouseleave="handleLeave(index)"
      >
        <i :class="{ active: index === currentIndex }"> {{ item.type }}</i>
        <i
          class="iconfont iconjiantou1"
          :class="{ active: index === currentIndex }"
        ></i>
      </div>
    </div>

    <!--tab切换之后显示的框框 -->
    <div v-if="isShow" class="aside-menu">
      <div
        class="aside-menu-content"
        @mouseenter="isShow = true"
        @mouseleave="isShow = false"
      >
        <div
          v-for="(item, index) in children"
          :key="index"
          @click="handletiao(item.city)"
        >
          <a href="#" class="bigSize">{{ index + 1 }}</a>
          <a href="#" class="midSize">{{ item.city }}</a>
          <a href="#" class="smaSize">{{ item.desc }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      cityList: [],
      children: [],
      currentIndex: -1,
    };
  },
  created() {
    this.$axios({
      url: "/posts/cities",
    }).then((res) => {
      this.cityList = res.data.data;
    });
  },
  methods: {
    handleStrategy(index) {
      this.currentIndex = index;
      this.isShow = true;
      this.children = this.cityList[index].children;
    },
    handleLeave(index) {
      this.isShow = false;
    },
    cityStrategy() {},
    handletiao(city) {
      this.$router.push("post?city=" + city);
    },
  },
};
</script>

<style lang="less" scoped>
.aside {
  position: relative;
  width: 260px;
}
.aside-tab {
  width: 260px;
  border: 1px solid #ccc;
  div {
    width: 220px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    .active {
      color: #ffa500 !important;
    }
    .iconjiantou1 {
      font-size: 18px;
      color: #aeaeae;
    }
  }
}

.aside-menu {
  position: absolute;
  top: 0px;
  left: 260px;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  // 层级 改了之后在输入框上面
  z-index: 99;
  background-color: #fff;
  border: 1px solid #ccc;
  .aside-menu-content {
    width: 300px;
    a {
      margin-left: 12px;
    }
    .bigSize {
      font-size: 28px;
      color: #ffa500;
    }
    .midSize {
      font-size: 14px;
      color: #ffa500;
      &:hover {
        text-decoration: underline;
      }
    }
    .smaSize {
      font-size: 12px;
      color: #ccc;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>